<template>
    <jb-crud-page
        ref="userPage"
        search-url="/api/admin/wechatMedia/datas"
        :search-conditions="pageConditions"
    >
        <template #title>
            <div class="flex items-center">
                <span>素材库管理</span>
            </div>
        </template>
        <template #conditions-form>
            <n-input
                v-model:value="pageConditions.keywords"
                type="text"
                style="width: 130px"
                placeholder="输入关键字搜索"
            />
            <jb-select
                v-model:value="pageConditions.type"
                :clearable="false"
                placeholder="=类型="
                url="/api/admin/wechatMedia/types"
                class="max-w-100px"
                filterable
            />
        </template>

        <template #opt>
            <n-popover trigger="hover">
                <template #trigger>
                    <jb-btn type="warning" icon="material-symbols:upload-sharp">
                        将素材中资源上传到七牛
                    </jb-btn>
                </template>
                <template #default>
                    <div class="w-800px h-600px">
                        <qiniu-choose @choose="syncUpload"></qiniu-choose>
                    </div>
                </template>
            </n-popover>
            <jb-btn
                class="ml-2 mr-2"
                type="primary"
                ghost
                :icon="Icons.REFRESH"
                @click="handleNewMaterial"
            >
                同步最新素材
            </jb-btn>
            <jb-btn type="primary" ghost :icon="Icons.REFRESH" @click="handleAllMaterial">
                同步所有素材
            </jb-btn>
        </template>

        <template #default="{ list, tableStartIndex }">
            <jb-table
                ref="tableRef"
                style="flex: 1"
                :start-index="tableStartIndex"
                :data="list"
                :row-config="{ height: 80 }"
            >
                <jb-column type="seq" title="序号" width="60"></jb-column>
                <jb-column
                    field="title"
                    title="名称"
                    width="400"
                    header-align="center"
                    align="left"
                >
                    <template #default="{ row }">
                        <jb-avatar
                            v-if="row.type == 'image'"
                            :src="row.serverUrl"
                            :round="false"
                        ></jb-avatar>
                        <jb-btn
                            v-if="row.type == 'news' || row.type == 'video'"
                            text
                            tag="a"
                            :href="row.serverUrl"
                            target="_blank"
                            type="primary"
                        >
                            {{ row.title }}
                        </jb-btn>

                        <audio v-if="row.type == 'voice'" controls>
                            <source :src="row.serverUrl" type="audio/mpeg" />
                            您的浏览器不支持 audio 标签。
                        </audio>
                    </template>
                </jb-column>
                <jb-column field="type" title="类型" width="120">
                    <template #default="{ row }">
                        <n-tag v-if="row.type == 'image'" type="primary">图片</n-tag>
                        <n-tag v-if="row.type == 'news'" type="primary">图文</n-tag>
                        <n-tag v-if="row.type == 'video'" type="primary">视频</n-tag>
                        <n-tag v-if="row.type == 'voice'" type="primary">语音</n-tag>
                    </template>
                </jb-column>
                <jb-column field="updateTime" title="时间" width="200"> </jb-column>
            </jb-table>
        </template>
    </jb-crud-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Icons } from '@/constants'
import { JBoltApi } from '@/utils'
import JbCrudPage from '@/components/_builtin/jb-crud-page/index.vue'
import { useResetableData } from '@/hooks/common/use-resetable-data'
import JbBtn from '@/components/_builtin/jb-btn/index.vue'
import QiniuChoose from '@/views/_builtin/management/qiniu/bucket/choose.vue'

const props = withDefaults(
    defineProps<{
        id: string
    }>(),
    {
        id: ''
    }
)

const userPage = ref<InstanceType<typeof JbCrudPage> | null>(null)
const pageConditions = useResetableData({
    keywords: '',
    type: 'image',
    mpId: props.id
})

function syncUpload(bucketId) {
    window.$notification.info({
        title: '素材同步上传中',
        content: '请稍后查询',
        duration: 5000
    })
    JBoltApi.get(
        `/api/admin/wechatMedia/syncUpload/${props.id}?bucketId=${bucketId}`
    ).then(({ result }) => {
        userPage.value?.loadData()
    })
}

function handleNewMaterial() {
    window.$notification.info({
        title: '同步最新素材中',
        content: '请稍后查询',
        duration: 5000
    })
    JBoltApi.get(`/api/admin/wechatMedia/syncNewDatas/${props.id}`).then(({ result }) => {
        userPage.value?.loadData()
    })
}

function handleAllMaterial() {
    window.$notification.info({
        title: '正在同步所有素材',
        content: '请稍后查询',
        duration: 5000
    })
    JBoltApi.get(`/api/admin/wechatMedia/syncAll/${props.id}`).then(({ result }) => {
        userPage.value?.loadData()
    })
}
</script>

<style scoped></style>
